<template>
  <article>
    <h1 class="t_nav">
      <span>晓看天色暮看云,行也思君坐也思君</span>
      <span class="localtion">您的位置 &lt;&lt; 列表</span>
    </h1>
    <div class="infos">
      <div class="newsview">
        <h3 class="news_title">{{article.title}}</h3>
        <div class="news_author">
          <span class="au01">
            <a href>{{author}}</a>
          </span>
          <span class="au02">{{article.publishDate|formatDate}}</span>
          <span class="au03">
            共
            <b>{{article.views}}</b>人围观
          </span>
        </div>
        <div class="tags">
          <a @click="toTagList(article.tags1)" target="_blank">{{article.tag.tagsName}}</a>
        </div>
        <!-- 具体详情 -->
        <div class="news_infos">{{article.articleDetail.richText}}</div>
      </div>
      <div class="share"></div>
      <div class="nextinfo">
        <p v-if="JSON.stringify(preArticle)!='{}'">
          上一篇：
          <el-link :underline="false" @click="refreshById(preArticle.id)">{{preArticle.title}}</el-link>
        </p>
        <p v-if="JSON.stringify(nextArticle)!='{}'">
          下一篇：
          <el-link :underline="false" @click="refreshById(nextArticle.id)">{{nextArticle.title}}</el-link>
        </p>
      </div>
      <div class="otherlink">
        <h2>相关文章</h2>
        <ul>
          <li v-for="(item,index) in relationArticles" :key="index">
            <el-link :underline="false" @click="refreshById(item.id)">{{item.title}}</el-link>
          </li>
        </ul>
      </div>
      <div class="news_pl">
        <h2>文章评论</h2>
        <div class="gbko">
          <div class="fb">
            <ul>
              <img src="/static/images/avatar.jpg" alt />
              <p class="fbtime">
                <span>2019-08-03</span>
                lyx
              </p>
              <p class="fbinfo">This is content</p>
            </ul>
          </div>

          <div class="fb">
            <ul>
              <img src="/static/images/avatar.jpg" alt />
              <p class="fbtime">
                <span>2019-08-03</span>
                lyx
              </p>
              <p class="fbinfo">This is content</p>
            </ul>
          </div>
          <div class="fb">
            <ul>
              <img src="/static/images/avatar.jpg" alt />
              <p class="fbtime">
                <span>2019-08-03</span>
                lyx
              </p>
              <p class="fbinfo">This is content</p>
            </ul>
          </div>
        </div>
        <!-- 统计 -->
        <div>
          <p class="saying">
            来说两句吧...
            <span>共有18条评论</span>
          </p>
          <div class="com">
            <p>
              <span>用户名：</span>
              <el-input size="small" placeholder="请输入内容"></el-input>
            </p>
            <p>
              <span>验证码：</span>
              <el-input size="small" placeholder="请输入内容"></el-input>
            </p>
          </div>
        </div>
      </div>
      <!-- 发表评论 -->
      <!-- <div class="comment">
        <h2>
          <span class="iconfont">&#xe650;</span>发表评论
          
        </h2>
        <ul>
          <div></div>
        </ul>
      </div>-->
    </div>
  </article>
</template>

<script>
import { formatDate } from "@/utils/tools";
export default {
  data() {
    return {
      article: {
        articleDetail: {
          richText: ""
        },
        tag: {}
      },
      author: "Yan",
      preArticle: {},
      nextArticle: {},
      relationArticles: {}
    };
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    }
  },
  created() {
    this.getArticleDetail();
  },
  methods: {
    getArticleDetail() {
      this.preArticle = {};
      this.nextArticle = {};
      let id = this.$route.query.articleId;
      this.$http({
        url: this.$http.adornUrl(`/api/article/${id}/detail`),
        method: "GET"
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.article = data.data;
          }
        })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/api/article/${this.article.id}/near`),
            method: "GET"
          })
            .then(({ data }) => {
              if (data && data.code === 0) {
                let lists = data.data;
                if (lists.length > 1) {
                  this.preArticle = lists[0];
                  this.nextArticle = lists[1];
                } else if (lists.length === 1) {
                  if (lists[0].id < this.article.id) {
                    this.preArticle = lists[0];
                  } else {
                    this.nextArticle = lists[0];
                  }
                }
              }
            })
            .then(() => {
              this.relationArticle();
            });
        });
    },
    refreshById(val) {
      this.$router.replace({ name: "_detail", query: { articleId: val } });
      this.getArticleDetail();
    },
    relationArticle() {
      let tagId = this.article.tags1;
      this.$http({
        url: this.$http.adornUrl(`/api/article/${tagId}/list`),
        method: "GET",
        params: this.$http.adornParams({ size: 4 }, false)
      }).then(({ data }) => {
        this.relationArticles = data.data.content;
      });
    },
    toTagList(val) {
      this.$router.push({ name: "_list", query: { tagId: val } });
    }
  }
};
</script>

<style lang="scss">
.el-input {
  width: 26%;
  height: 40px;
}
.com {
  padding: 2px 10px;
}
.com p{
  margin: 5px;
}
.au01 {
  background: url(/static/images/author2.png) no-repeat left center;
}
.au02 {
  background: url(/static/images/date.png) no-repeat left center;
}
.au03 {
  background: url(/static/images/newsbg04.png) no-repeat left center;
}
.au03 b {
  color: #333;
}
.t_nav .localtion {
  float: left;
  padding-left: 8px;
  font-weight: 400;
}
.otherlink h2 {
  border-bottom: #000 2px solid;
  line-height: 40px;
  font-size: 14px;
  background: url(/static/images/5794.png) left 10px center no-repeat;
  padding-left: 40px;
  color: #000;
}
.tags a {
  cursor: pointer;
}
.saying {
  line-height: 30px;
  color: #a9a6a6;
  margin: 10px 10px;
}
.saying span {
  float: right;
}
</style>